<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>活动详情</title>    
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
   	<link rel="stylesheet" type="text/css" href="../css/mgPublic.css"/>
   	<link rel="stylesheet" type="text/css" href="../css/mggj.css"/>
    <link rel="stylesheet" type="text/css"/>
    <style type="text/css">
    	body{background-color: #f5f5f5;}
    	.mui-scroll-wrapper{top: 44px; bottom: 51px;}
    	.swiper-container {
        width: 100%;
        height: 100%;
	    }
	    .swiper-slide {
	        text-align: center;
	        font-size: 18px;
	        background: #fff;
	        
	        /* Center slide text vertically */
	        display: -webkit-box;
	        display: -ms-flexbox;
	        display: -webkit-flex;
	        display: flex;
	        -webkit-box-pack: center;
	        -ms-flex-pack: center;
	        -webkit-justify-content: center;
	        justify-content: center;
	        -webkit-box-align: center;
	        -ms-flex-align: center;
	        -webkit-align-items: center;
	        align-items: center;
	    }
	    .mui-popover.mui-popover-action .mui-table-view{margin: 0;}
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav head_bar">
   <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">活动详情</h1>
    <a href="#share" class="mui-icon iconfont icon-fenxiang mui-pull-right head_right_ico"></a>
    <!--<a class="mui-icon iconfont icon-shoucang mui-pull-right head_right_ico"></a>-->
</header>
<div class="mui-content">
    <div class="mui-scroll-wrapper" id="mui-scroll">
        <div class="mui-scroll">
            <div class="mui-card project_list_card project_detail_card">
				<div class="mui-card-content">
					<img src="../images/find/activity_detail_top_img.png" alt="" width="100%">
				</div>
			</div>
			<div class="avtivity_head">
				<h2>活动主题：感恩节巨献，秋日趴趴走<span class="bdge_span bule_span mui-pull-right">报名中</span></h2>
				<p>（已有30人报名，剩余名额10个）</p>
				<ul>
					<li>活动时间：2016-03-20 上午10:00</li>
					<li>活动地点：广州市人民公园 （距我3.5KM）</li>
					<li>主办人：方芳芳</li>
				</ul>
			</div>
			<h3 class="sign_info">报名信息<a href="select_friends.html">邀请好友></a></h3>
			<div class="detail_swiper sign_info_peo">
				<div class="swiper-container">
			        <div class="swiper-wrapper">
			            <div class="swiper-slide swiper-no-swiping">
			            	<div class="detail_swiper_con">
			            		<a href="javascript:;"><img src="../images/find/tp1.png"/></a>
			            		<p class="detail_swiper_p">loman</p>
			            	</div>
			            </div>
			            <div class="swiper-slide swiper-no-swiping">
			            	<div class="detail_swiper_con">
			            		<a href="javascript:;"><img src="../images/find/tp1.png"/></a>
			            		<p class="detail_swiper_p">beta</p>
			            	</div>
			            </div>
			            <div class="swiper-slide swiper-no-swiping">
			            	<div class="detail_swiper_con">
			            		<a href="javascript:;"><img src="../images/find/tp1.png"/></a>
			            		<p class="detail_swiper_p">loman</p>
			            	</div>
			            </div>
			            <div class="swiper-slide swiper-no-swiping">
			            	<div class="detail_swiper_con">
			            		<a href="javascript:;"><img src="../images/find/tp1.png"/></a>
			            		<p class="detail_swiper_p">larry</p>
			            	</div>
			            </div>
			            <div class="swiper-slide swiper-no-swiping">
			            	<div class="detail_swiper_con">
			            		<a href="javascript:;"><img src="../images/find/tp1.png"/></a>
			            		<p class="detail_swiper_p">beta</p>
			            	</div>
			            </div>
			            <div class="swiper-slide swiper-no-swiping">
			            	<div class="detail_swiper_con">
			            		<a href="javascript:;"><img src="../images/find/tp1.png"/><p>更多</p></a>
			            		<p class="detail_swiper_p">loman</p>
			            	</div>
			            </div>
			        </div>
			    </div>
			</div>
			<div class="mui-card project_list_card">
				<div class="mui-card-header">活动详情</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						本次活动的目的在于培养每一位演员传播品牌的力量！《我们让世界更美丽 们让产品更丰富 我们让企业更知名》。力争每一位学员高薪就业，本次活动消费全由发起人承担，
						注意事项：本次活动起人不承担安全责任问题，活动时间需服从发起人安排知道，如有疑问请咨询
					</div>
				</div>
			</div>
			<div class="preview">
				<a href="##" class="mui-btn mui-btn-block mui-btn-primary">我要报名</a>
			</div>
        </div>
    </div>
</div>
<div id="share" class="mui-popover mui-popover-bottom mui-popover-action mm_botttom_box">
	<ul class="mui-table-view mui-grid-view mui-grid-9">
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/weixin_ico.png"/>
		        </span>
		        <div class="mui-media-body">微信好友</div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/friend_ico.png"/>
		        </span>
		        <div class="mui-media-body">微信朋友圈</div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/qq_kj_ico.png"/>
		        </span>
		        <div class="mui-media-body">QQ空间</div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/qq_ico.png"/>
		        </span>
		        <div class="mui-media-body">QQ</div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/tent_ico.png"/>
		        </span>
		        <div class="mui-media-body">腾房微博</div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/xinlang_ico.png"/>
		        </span>
		        <div class="mui-media-body">新浪微博</div>
		    </a>
		</li>
   </ul>
   <div class="cancel_box"><a href="#share" class="mui-btn mui-btn-grey mui-btn-block cancel_btn">取消</a></div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
	statusBarBackground:'#fff'
});
mui("#mui-scroll").scroll();
 var swiper = new Swiper('.swiper-container', {
//  nextButton: '.swiper-button-next',
//  prevButton: '.swiper-button-prev',
    slidesPerView:6,
    
    //paginationClickable: true,
    spaceBetween:0
});
</script>	
</body>
</html>